<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

	<title>Accordions and Tabs</title> 

	<link rel="stylesheet" type="text/css" href="css/layout-default-latest.css" />
    <link rel="stylesheet" type="text/css" href="css/start/jquery-ui-1.9.0.custom.min.css" />

	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js"></script>
	<script type="text/javascript" src="js/jquery.layout-latest.js"></script>

    <!-- load the Tabs & Accordions callbacks so we can use them below-->
    <script type="text/javascript" src="js/jquery.layout.resizeTabLayout.min-1.1.js"></script>
    <script type="text/javascript" src="js/jquery.layout.resizePaneAccordions.min-1.0.js"></script>
	<!-- OR load the all-in-one Callbacks package...
	<script type="text/javascript" src="../lib/js/jquery.layout.callbacks.min-latest.js"></script>
	-->



	<script type="text/javascript">
    var tabs;

    function multiSelections()
    {
        top.frames['listFrame'].changeTreeType('multi');
    }
    function singleSelection()
    {
        top.frames['listFrame'].changeTreeType('single');
    }
    function getKPITemplate(code)
    {
        var template = '<iframe id="' + code + '" src="kpis/kpi-template.html?kpi=mytham2.swf" style="height: 100%; width: 100%;">' +
                       '</iframe>';
        return template;
    }

    var username;
    var applicationLevel;
    var defaultPlant;

    function isComplete(val)
    {
        return (document.getElementById('listFrame').readyState == 'complete');
    }

    getSelectedKPIsFromChild = function()
    {

        if(isComplete('favouriteFrame'))
        {
            return top.frames['favouriteFrame'].getSelectedKPIs();
        }
    }

    getDefaultFromChild = function()
    {
        return defaultPlant;
    }

    function setDefault(val)
    {
        if(isComplete('listFrame'))
        {
            top.frames['listFrame'].setDefault(val);
        }
    }
    function setUsername(val)
    {
        $('#username').html(val);
    }
    function setApplicationLevel(val)
    {
        $('#applicationLevel').html(val);
    }

    function getSelectedIFrame()
    {
        var selectedIndex = tabs.tabs('option', 'selected');
        var selectedID = $('#tabs-links li a')[selectedIndex].toString();
        selectedID = selectedID.split("#")[1];
        var selectedIFrame = $('div#' + selectedID + " iframe").attr('id');
        return selectedIFrame;
    }

    function refreshCurrentTab()
    {
        var selectedIFrame = getSelectedIFrame();

        if(selectedIFrame == 'radarFrame')
        {
            multiSelections();
        }
        else
        {
            singleSelection();
        }

        top.frames[selectedIFrame].refresh();
    }

	$(document).ready(function () {


        //read user info...
        $.ajax({
            type: "GET",
            url: "data/my_info.xml",
            dataType: "xml",
            success: function(xml) {
                username = $(xml).find('userInfo data username').attr('value');
                applicationLevel = $(xml).find('userInfo data applicationLevel').attr('value');
                defaultPlant = $(xml).find('userInfo data defaultPlant').attr('plantName');
                setUsername(username);
                setApplicationLevel(applicationLevel);
                setDefault(defaultPlant);
            }
        });




        getPlantFromChild = function ()
        {
            return $('#listFrame')[0].contentWindow.getPlant();
        }




        addKPIFromChild = function(code, label, url) {
            addTab(code, label, getKPITemplate(code));
        };



        adminAreaGotChangedFromChild = function()
        {
            refreshCurrentTab();
        }
        favouriteGotChangedFromChild = function()
        {
            refreshCurrentTab();
        }

		// OUTER/PAGE LAYOUT
		pageLayout = $("body").layout({ // DO NOT use "var pageLayout" here
			west__size:			300
		,	east__size:			300
        ,	north__size:		70
		//,	south__initClosed:	true
		,	north__initClosed:	false
        ,	east__initClosed:	true
		,	west__onresize:		$.layout.callbacks.resizePaneAccordions // west accordion a child of pane
		,	east__onresize:		$.layout.callbacks.resizePaneAccordions // east accordion nested inside a tab-panel
		});

		// TABS IN CENTER-PANE
		// create tabs before wrapper-layout so elems are correct size before creating layout
		tabs = pageLayout.panes.center.tabs({
			show:				$.layout.callbacks.resizeTabLayout // tab2-accordion is wrapped in a layout
		});

		// WRAPPER-LAYOUT FOR TABS/TAB-PANELS, INSIDE OUTER-CENTER PANE
		pageLayout.panes.center.layout({
			closable:			false
		,	resizable:			false
		,	spacing_open:		0
		,	center__onresize:	$.layout.callbacks.resizeTabLayout // tabs/panels are wrapped with an inner-layout
		});



		pageLayout.sizeContent("east"); // resize pane-content-elements after creating east-tabs

		// INIT ALL ACCORDIONS - EVEN THOSE NOT VISIBLE
		$("#accordion-west")	.accordion({ fillSpace: true });







        // actual addTab function: adds new tab using the input from the form above
        function addTab(code, tabTitle, tabContent)
        {
            var found = false;
            var id = "tabs-" + code

            //check if already available...
            $('#tabs-links li a').each(function(i)
            {
                if($(this).attr('href') == "#" + id)
                {
                    tabs.tabs({ selected: i });
                    found = true;
                    return;
                }
            });

            //if not available, create it...
            if(!found)
            {
                var li2 = '<li><a href="#' + id +'">' +
                          '<span class="ui-icon ui-icon-left tab-kpi">' + tabTitle + '</span>&nbsp;' + tabTitle +
                          '</a><span class="ui-icon ui-icon-right ui-icon-close">close</span></li>';

                tabs.find( ".ui-tabs-nav" ).append( li2 );
                $('#tabs-contents').append( "<div class='no-scrollbar' style='width: 100%; height: 100%; padding: 0 0 0 0' id='" + id + "'>" + tabContent + "</div>" );
                tabs.tabs( "refresh" );
                pageLayout.resizeAll();
                var lastIndex = ($('#tabs-links').children().length) - 1;
                tabs.tabs({ selected: lastIndex });
            }

        };

        // close icon: removing the tab on click
        $( "#tabs-center span.ui-icon-close" ).live( "click", function() {
            var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
            pageLayout.resizeAll();
        });

        $( "#tabs-center li a" ).live( "click", function() {
            refreshCurrentTab();
        });




	});

	</script>




    <style type="text/css">
        #tabs-center { margin-top: 1em; }
        #tabs-center li .ui-icon-right { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
        #tabs-center li .ui-icon-left { float: left; margin: 0 0 0.2em 0.4em; cursor: pointer; }
        #tabs-center li .tab-kpi { background-image:url("images/icons/Actions-office-chart-bar-icon.png"); }
        #tabs-center li .tab-summary { background-image:url("images/icons/reports-icon.png"); }
        #tabs-center li .tab-gauge { background-image:url("images/icons/gauge.png"); }
        #tabs-center li .tab-comparison { background-image:url("images/icons/price-comparison-icon.png"); }
        #tabs-center li .tab-radar { background-image:url("images/icons/radar.png"); }
        #tabs-center li .tab-admin { background-image:url("images/icons/Admin-min-icon.png"); }
        #accordion-west .ui-icon-left { float: left; margin: 0 0 0.2em 0.4em; cursor: pointer; }
        #accordion-west .accordion-plants { background-image:url("images/icons/coal-power-plant-icon.png"); }
        #accordion-west .accordion-divisions { background-image:url("images/icons/Misc-Database-3-icon.png"); }
        #accordion-west .accordion-kpis { background-image:url("images/icons/Actions-office-chart-bar-icon.png"); }
    </style>
    
</head> 
<body>

<div class="ui-layout-north ui-widget-content">
    <div style="width: 100%; height: 100%;" class="ui-widget-header">
        <div style="float: left; vertical-align: middle;">
            <img src="images/barchart2.png" style="float: left;" alt="logo" />
            <span>Welcome </span><span id="username"></span>
            <span id="applicationLevel"></span>

            <h1>MIR Dashboard</h1>

        </div>
        <img src="images/aramcologo.png" style="float: right;" alt="logo" />
    </div>

</div>
<!--div class="ui-layout-south ui-widget-content add-padding">South</div-->


<div class="ui-layout-west no-scrollbar add-padding grey">
	<div id="accordion-west" style="padding: 0 0 0 0">

			<h3><a href="#"><span class='ui-icon ui-icon-left accordion-plants'>plant</span>&nbsp;Plants</a></h3>
            <div class="no-padding">
                <iframe id="listFrame" src="list.html" style="width: 98%; height: 98%"></iframe>
            </div>

			<h3><a href="#"><span class='ui-icon ui-icon-left accordion-divisions'>org hierarchy</span>&nbsp;Org Hierarchy</a></h3>
        <div class="no-padding">
            <iframe id="orgFrame" src="org.html" style="width: 98%; height: 98%"></iframe>
        </div>

        <h3><a href="#"><span class='ui-icon ui-icon-left ui-icon-star'>favourite</span>Favourites</a></h3>
        <div class="no-padding">
            <iframe id="favouriteFrame" src="favourite.html" style="width: 98%; height: 98%"></iframe>
        </div>

	</div>
</div>


<div id="tabs-center" class="ui-layout-center no-scrollbar add-padding grey">
	<!-- center Tabs layout -->
	<ul id="tabs-links" class="ui-layout-north no-scrollbar allow-overflow">
		<li>
            <a href="#tab-panel-center-1">
                <span class='ui-icon ui-icon-left tab-summary'>summary tab</span>&nbsp;Summary
            </a>
        </li>
		<li>
            <a href="#tab-panel-center-2">
                <span class='ui-icon ui-icon-left tab-gauge'>gauge tab</span>&nbsp;Graphical
            </a>
        </li>
        <li>
            <a href="#tab-panel-center-3">
                <span class='ui-icon ui-icon-left tab-comparison'>comparison tab</span>&nbsp;Comparison
            </a>
        </li>
        <li>
            <a href="#tab-panel-center-4">
                <span class='ui-icon ui-icon-left tab-radar'>radar tab</span>&nbsp;Radar
            </a>
        </li>
        <li>
            <a href="#tab-panel-center-5">
                <span class='ui-icon ui-icon-left tab-admin'>admin tab</span>&nbsp;Admin
            </a>
        </li>
	</ul>
	<div id="tabs-contents" class="ui-layout-center ui-widget-content" style="border-top: 0;">
        <div id="tab-panel-center-1" class="outline no-scrollbar no-padding" style="height: 100%; width: 100%">
            <iframe id="summaryFrame" src="summary.html" style="height: 100%; width: 100%;">
            </iframe>
        </div>

		<div id="tab-panel-center-2" class="outline no-scrollbar no-padding" style="height: 100%; width: 100%">
            <iframe id="gaugesFrame" src="gauges.html" style="height: 100%; width: 100%;"></iframe>
		</div>
        <div id="tab-panel-center-3" class="outline no-scrollbar no-padding" style="height: 100%; width: 100%">
            <iframe id="comparisonFrame" src="gauges.html" style="height: 100%; width: 100%;"></iframe>
        </div>
        <div id="tab-panel-center-4" class="outline no-scrollbar no-padding" style="height: 100%; width: 100%">
            <iframe id="radarFrame" src="radar/test.html" style="height: 100%; width: 100%;">
            </iframe>
        </div>
        <div id="tab-panel-center-5" class="outline no-scrollbar no-padding" style="height: 100%; width: 100%">
            <iframe id="adminFrame" src="admin.html" style="height: 100%; width: 100%; margin-left: 0">
            </iframe>
        </div>
	</div>
	<div class="ui-layout-south ui-state-disabled ui-widget-content ui-corner-bottom no-scrollbar add-padding2">
		Business Intelligence (2012)
	</div>
	<!-- /center Tabs layout -->
</div>


<div id="tabs-east" class="ui-layout-east no-padding no-scrollbar">
	<div class="ui-widget-header no-scrollbar add-padding" style="margin: 0 1px;">
		TABS HEADER
	</div>
	<div id="east-toolbar" class="ui-state-highlight ui-widget-content no-scrollbar add-padding"
	style="position: relative; margin: 0 1px;">
	</div>
</div>






</body> 
</html>